<template>
  <div class="goods-Detail">
    <!-- <div class="topBtn">
      <van-row type="flex" justify="space-between">
      <van-col span="12"><van-icon @click="onRetrun" :name="iconReturn" size="32" /></van-col>
      <van-col span="12"><van-icon @click="onShare" :name="iconShare" size="32" /></van-col>
    </van-row>
    </div> -->
    <van-swipe @change="onChange" class="swipeImg" v-if="detailInfo">
      <van-swipe-item v-for="(item,index) in detailInfo.photos" :key="index" @click="showImagePreview(index)">
        <van-image
          width="100%"
          height="75vw"
          fit="scale-down"
          :src="item.photoUrl"
        /></van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{totalNum}}</div>
      </template>
    </van-swipe>
    <van-image-preview 
        v-model="ImagePreviewShow" 
        :images="prevewImg" 
        :start-position = this.current
        @change="onChangeImagePreview"
        @close = "closeImagePreview"
        >
    </van-image-preview> 
    <div class="goods-info">
      <div class="price">¥<span>{{detailInfo.goodsPrice}}</span></div>
      <div class="title clamp2">{{detailInfo.goodsName}}</div>
    </div>
    <div class="goodsContent">
        <div class="title">商品详情</div>
        <div class="content">
          <div v-html="detailInfo.goodsDescribe"></div>
        </div>
    </div>
    <div class="payBtn">
      <van-button @click="onBuyNow" type="primary" size="28" color="#DB1919" block>立即购买</van-button>
    </div>
  </div>
</template>

<script>
import wx from '@/utils/wxsdk'
import $api from "@/api/index";
import {getToken,setToken} from "@/utils/auth"
export default {
  name: "goodsDetail",
  components: {
  },
  data() {
    return {
      ImagePreviewShow: false,
      totalNum:'1',
      current: 0,
      iconReturn:require("@/assets/icon/icon-return.png"),
      iconShare:require("@/assets/icon/icon-share.png"),
      detailInfo:{},
      goodId:''
    };
  },
  methods: {
    getDetailInfo(){
      $api.shopApi.goodsDetail({goodsId:this.goodId}).then((res)=>{
        if(res.status == 10000){
          let datas = res.data
          this.detailInfo = datas
          this.totalNum = datas.photos.length
          //document.title = datas.goodsName
          let newImg = []
          if(datas.photos.length > 0){
            datas.photos.forEach(e => {
              //console.log(e)
              newImg.push(e.photoUrl)
            });
          }
          this.prevewImg = newImg
          this.onShare()
        }
      })
    },
    onChange(index) {
      this.current = index;
    },
    onRetrun(){
      this.$router.go(-1);
    },
    onShare(){
      if(this.detailInfo){
        let content = this.detailInfo.goodsDescribe.replace(/<[^>]+>/g, '') || ''
        wx.getShareInfo(this.detailInfo.goodsName || '分享',window.location.href, this.detailInfo.photos[0].photoUrl,content);
      }
    },
    //显示预览图
    showImagePreview(index){          
        this.ImagePreviewShow = true; 
        this.current = index;      
    },
    onChangeImagePreview(index){  
        this.index = index;                          
    },
    //关闭预览图
    closeImagePreview(info){
        this.current = info.index;
    },
    onBuyNow(){
      this.$router.push({path:"/confirmOrder",query:{goodsId:this.goodId,source:this.source}})
    },
    //授权
    authLogin(){
      let token = getToken('TOKEN_KEY')
      let cid = getToken('cid')
      console.log(token)
      if(!token){
        let url = location.href;
        if(url.indexOf('openId')==-1){
          location.href = "https://api.51ysscw.life/interface/api/mobile/public/wxUserInfo/exclude/authorize?id="+cid
        }else{
          let openId = this.$route.query.openId;
          if(openId){
            this.openId = openId;
            setToken(openId)
          }
        }
      }
      
    }
  },
  mounted(){
    let goodId = this.$route.query.goodsId
    //console.log(this.$route.query)
    if(goodId){
      this.goodId = goodId
    }
    let source = this.$route.query.source
    if(source){
      this.source = source
    }
    this.getDetailInfo()
  },
  created() {
    this.authLogin()
  },
  activated(){
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/variables";
.custom-indicator {
    position: absolute;
    right: 36px;
    bottom: 26px;
    color: #FFFFFF;
  }
  .goods-Detail{
    font-size: 24px;
    line-height: 40px;
    color: #323232;
    padding-bottom: 220px;
    .topBtn{
      position: fixed;
      padding:30px 24px;
      box-sizing:border-box;
      -webkit-box-sizing: border-box;
      top: 0;
      left: 0;
      z-index: 3;
      width: 100%;
      .van-col:last-child{
        text-align:right;
      }
    }
    .swipeImg{
      background: #222;
      img{
        width: 100%;
        height: 750px;
      }
    }
    .goods-info{
      padding: 32px 24px;
      border-bottom: 2px solid #EEEEEE;
      .price{
        font-size: 28px;
        span{
          font-size: 48px;
          padding-left:5px;
        }
      }
      .title{
        font-size: 32px;
        color: #333333;
        line-height: 44px;
        margin-top: 24px;
        font-weight: bold;
      }
    }
    .goodsContent{
      clear: both;
      overflow: hidden;
      font-size: 24px;
      color: #666666;
      .title{
        font-size: 28px;
        padding:32px 24px;
        font-weight: bold;
        color: #323232;
      }
      img{
        width: 100%;
      }
    }
    .payBtn{
      box-sizing:border-box;
      -webkit-box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 196px;
      padding: 20px 24px;
      background: #FFFFFF;
    }

  }
</style>
<style lang="less">
.goodsContent{
      .content{
        p{
          padding:0 24px;
        }
      }
}
</style>
